<template>
  <div class="products-export">
    <el-card>
      <template #header>
        <h3>商品数据导出</h3>
      </template>

      <el-form :model="exportForm" label-width="120px">
        <el-form-item label="导出范围">
          <el-radio-group v-model="exportForm.scope">
            <el-radio label="all">全部商品</el-radio>
            <el-radio label="selected">选中商品</el-radio>
            <el-radio label="filtered">筛选结果</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="导出字段">
          <el-checkbox-group v-model="exportForm.fields">
            <el-checkbox label="productName">商品名称</el-checkbox>
            <el-checkbox label="category">商品分类</el-checkbox>
            <el-checkbox label="brand">品牌</el-checkbox>
            <el-checkbox label="price">价格</el-checkbox>
            <el-checkbox label="stock">库存</el-checkbox>
            <el-checkbox label="status">状态</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="导出格式">
          <el-radio-group v-model="exportForm.format">
            <el-radio label="xlsx">Excel (.xlsx)</el-radio>
            <el-radio label="csv">CSV (.csv)</el-radio>
            <el-radio label="pdf">PDF (.pdf)</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleExport" :loading="exporting">
            <el-icon><Download /></el-icon>
            开始导出
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Download } from '@element-plus/icons-vue'

const exporting = ref(false)

const exportForm = reactive({
  scope: 'all',
  fields: ['productName', 'category', 'brand', 'price', 'stock', 'status'],
  format: 'xlsx'
})

const handleExport = async () => {
  exporting.value = true
  // 模拟导出
  await new Promise(resolve => setTimeout(resolve, 2000))
  ElMessage.success('导出成功')
  exporting.value = false
}
</script>

<style scoped>
.products-export {
  padding: 20px;
}
</style>

